<template>

    <div class="content">
      <div class="niv">
        <div class="niv-title">当前位置:</div>
        <el-breadcrumb class="niv1" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>教师库</el-breadcrumb-item>
          <el-breadcrumb-item>教师详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="card">
        <el-card class="box-card">
          <div class="card-left">
            <img class="img" src="detail-pic/teacher_w.png" alt="" />
          </div>
          <div class="card-right">
            <div class="card-right-1">
              <div class="card-right-1-left">
                <div class="card-right-1-left-h"><h1>王老师</h1></div>
                <div class="card-right-1-left-v">
                  <a href=""></a>
                  <img src="detail-pic/v4.png" alt="" />
                </div>
                <div class="card-right-1-left-v">
                  <a href=""></a>
                  <img src="detail-pic/gold.png" alt="" />
                </div>
                <div class="card-right-1-left-p">
                  <el-rate
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                </div>
                <div class="card-right-1-right-1">
                  <img
                    src="detail-pic/二维码.jpg"
                    alt=""
                    width="90px"
                    height="90px"
                  />
                  <div>添加老师微信，即可预约</div>
                </div>
                <div class="card-right-1-right-2">
                  <span class="card-right-1-right-2-z"
                    ><strong>￥300</strong></span
                  >
                  <span>/1.5h</span>
                </div>
              </div>
            </div>
            <el-descriptions
              class="card-right-2"
              :column="2"
              labelStyle="font-weight:700"
            >
              <el-descriptions-item label="性别">女</el-descriptions-item>
              <el-descriptions-item label="教师编号"
                >18100000000</el-descriptions-item
              >
              <el-descriptions-item label="毕业学校"
                >清华大学</el-descriptions-item
              >
              <el-descriptions-item label="学历"> </el-descriptions-item>
              <el-descriptions-item label="出生年月"></el-descriptions-item>
              <el-descriptions-item label="来自省份"
                >kooriookami</el-descriptions-item
              >
              <el-descriptions-item label="目前身份"
                >kooriookami</el-descriptions-item
              >
              <el-descriptions-item label="教学年限"
                >kooriookami</el-descriptions-item
              >
              <el-descriptions-item label="登录时间"
                >kooriookami</el-descriptions-item
              >
              <el-descriptions-item label="住址"
                >kooriookami</el-descriptions-item
              >
              <el-descriptions-item label="证书"
                >kooriookami</el-descriptions-item
              >
            </el-descriptions>
            <div class="card-right-3">
              <el-row>
                <el-button @click="checkLogin" class="sc">
                  <img :src="scSrc" alt="" class="loginpic" />
                  {{ a }}
                </el-button>
                <el-button>加入备选</el-button>
                <el-button>立即咨询</el-button>
                <el-button
                  ><router-link to="/">在线预约</router-link></el-button
                >
                <!--收藏登录界面-->
                <el-dialog
                  :visible.sync="visible"
                  width="650px"
                  custom-class="scdialog"
                >
                  <div class="sclogin">
                    <div class="sclogin-1">
                      <img src="/detail-pic/login1.png" alt="" />
                    </div>
                    <div class="sclogin-2">
                      <!--收藏登录界面-->
                      <el-tabs v-model="activeName" @tab-click="dlClick">
                        <el-tab-pane label="密码登录" name="first">
                          <div style="margin-top: 15px">
                            <el-input
                              v-model="input"
                              placeholder="请输入手机号"
                            ></el-input>
                          </div>
                          <div style="margin-top: 15px">
                            <el-input
                              v-model="input"
                              placeholder="请输入密码"
                            ></el-input>
                          </div>
                          <div style="margin-top: 15px">
                            <el-input
                              v-model="input"
                              placeholder="请输入验证码"
                            ></el-input>
                          </div>
                        </el-tab-pane>
                        <el-tab-pane label="短信登录" name="second">
                          <div style="margin-top: 15px">
                            <el-input
                              v-model="input"
                              placeholder="请输入手机号"
                            ></el-input>
                          </div>
                          <div style="margin-top: 15px">
                            <el-input
                              v-model="input"
                              placeholder="请输入验证码"
                            ></el-input>
                          </div>
                          <div style="margin-top: 15px">
                            <el-input
                              v-model="input"
                              placeholder="请输入验证码"
                            ></el-input>
                          </div>
                        </el-tab-pane>
                      </el-tabs>
                      <div class="sclogin-3">
                        <el-button round class="sclogin-3-button">登录/注册</el-button>
                        <div class="sclogin-3-text">
                          新用户登录即注册，并表示您已同意严选家教 <el-link type="warning">[用户协议]</el-link> 及
                          <el-link type="warning">[隐私政策]</el-link>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-dialog>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>
      <div class="tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="教师详情" name="first">
            <div class="tabs-list">
              <h1>可教授科目:</h1>
              <h2>初一初二语文 初三语文</h2>
            </div>
            <div class="tabs-list">
              <h1>自我特色:</h1>
              <h2>
                大学期间，担任班级团支书，学生会文艺部部长，以及新生班级助理。
                有耐心有责任心，逻辑思维强，善于沟通交流，并且乐观开朗，幽默风趣，获得了老师和同学的一致好评！
              </h2>
            </div>
            <div class="tabs-list">
              <h1>可授课区域：</h1>
              <h2>无要求</h2>
            </div>
            <div class="tabs-list">
              <h1>可辅导方式：</h1>
              <h2>老师上门、在线授课、机构授课</h2>
            </div>
            <div class="tabs-list">
              <h1>详细描述：</h1>
              <h2></h2>
            </div>
            <div class="tabs-list">
              <h1>所获证书：</h1>
              <h2>英语四级六级</h2>
            </div>
            <div class="tabs-list">
              <h1>家教简历：</h1>
              <h2>
                工作经验:
                1、在大学顶岗实习期间获得石家庄区域顶岗实习微课决赛特等奖
                2、自2018.5至2021.9，在河北省石家庄市某县培训机构工作，三年来寒暑假及周六日一直都在一线教学，担任小学奥数教师，以及初中数学教师，所教学生成绩优异为学校年级佼佼者，有丰富的教学经验。目前手里有丰厚的分题型的奥数教学资料，以及中学教学教案。
              </h2>
            </div>
          </el-tab-pane>
          <el-tab-pane label="成功案例" name="second">成功案例</el-tab-pane>
          <el-tab-pane label="家长评价" name="third">家长评价</el-tab-pane>
          <el-tab-pane label="推荐教师" name="fourth">推荐教师</el-tab-pane>
        </el-tabs>
      </div>
    </div>

</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      value: 3.7,
      isLogin: "",
      visible: false,
      scSrc: "detail-pic/diloginhert.png",
      a: "收藏",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    dlClick(tab, event) {
      console.log(tab, event);
    },
    checkLogin() {
      if (this.scSrc == "detail-pic/loginhert.png") {
        this.scSrc = "detail-pic/diloginhert.png";
        this.a = "收藏";
        this.$message({
          message: "取消收藏",
          center: true,
        });
      } else {
        if (this.isLogin) {
          console.log("已登录");
          this.a = "已收藏";
          this.$message({
            message: "已收藏",
            center: true,
          });
          this.scSrc = "detail-pic/loginhert.png";
        } else {
          this.visible = true;
          console.log("未登录");
        }
      }
    },
  },
};
</script>

<style scoped>
.sclogin-3-text{
    margin-top:20px ;
  margin-right:-50px ;
}
.sclogin-3-button{
  width: 305px;
  height: 44px;
  margin-top:-15px ;
  margin-right:-50px ;
  background:-webkit-gradient(linear, 100% 0%, 0% 0%,from(#f3b13d), to(#ee7f30));
}
.el-input__inner{
  border-radius: 20px;
}
.scdialog {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0) ;
  background-color: rgba(0, 0, 0, 0);
}
.sclogin {
  width: 650px;
  height: 395px;
}
.sclogin-1 {
  float: right;
  width: 650px;
  height: 395px;
  position: absolute;
  right: 16px;
  top: 60px;
}
.sclogin-2 {
  width: 305px;
  float: right;
  position: absolute;
  right: 60px;
  top: 100px;
}
.sclogin-3 {
  float: left;
  clear: both;
  position: absolute;
  right: 48px;
  top: 270px;
}

.sc {
  width: 100px;
  height: 40px;
}
.loginpic {
  width: 20px;
  height: 20px;
  float: left;
  margin-top: -5px;
  margin-right: 5px;
}
.content {
  width: 1200px;
  margin: 200px auto;
  padding: 20px 30px;
    min-height: 700px;
    background: rgb(238, 246, 207);
    border-radius: 10px;
    margin-bottom: 30px;
}
.niv {
  width: 264px;
  height: 60px;
  float: left;
}
.niv-title {
  height: 60px;
  float: left;
  margin-top: 22px;
  margin-right: 10px;
  font-size: 16px;
}
.niv1 {
  margin-top: 9%;
}
.card-right-1-left-h {
  float: left;
}
.card-right-1-left-v {
  float: left;
  margin-top: 20px;
  margin-left: 15px;
}
.card-right-1-left-x {
  float: left;
}
.card-right-1-left-p {
  display: inline;
  float: left;
  clear: both;
}
.card-right-1-right-1 {
  width: 150px;
  height: 108px;
  float: right;
  margin-right: 100px;
  margin-top: -44px;
}
.card-right-1-right-2-z {
  font-size: 18px;
  color: #ff8000;
}
.card-right-1-right-2 {
  margin-right: -241px;
  float: right;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
.img {
  width: 372px;
  height: 372px;
}
.card-left {
  width: 372px;
  height: 457px;
  float: left;
}
.card-right {
  width: 768px;
  height: 457px;
  float: right;
}
.card-right-2 {
  float: left;
  width: 728px;
  height: 217px;
  margin-top: 30px;
}
.el-descriptions__body
  .el-descriptions__table
  .el-descriptions-item__cell {
  box-sizing: border-box;
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px;
  background: rgb(245, 245, 245);
}
.card-right-3 {
  float: left;
  margin-left: 0px;
  margin-top: 26px;
}
.tabs {
  margin-top: 10px;
  text-align: left;
}
.tabs-list {
  margin-top: 22px;
  padding-bottom: 20px;
}
.tabs h1 {
  font-weight: bold;
  width: 108px;
  text-align: right;
  float: left;
  line-height: 8px;
  font-size: 100%;
}
.tabs h2 {
  width: 990px;
  float: left;
  line-height: 24px;
  padding-left: 10px;
  font-size: 100%;
  font-weight: normal;
}
</style>